<template>
  <view class="main">
    <view class="title">
      <i class="icon el-icon-s-data"></i>
      <text style="flex: 1">用户概况</text>
      <text style="font-size: 12px; color: rgba(0, 0, 0, 0.85)"
        >时间筛选：</text
      >
      <vk-data-input-date-time
        v-model="time"
        type="daterange"
        size="small"
        :clearable="false"
        :picker-options="pickerOptions"
      ></vk-data-input-date-time>

      <el-button
        style="margin-left: 10rpx"
        type="primary"
        size="small"
        @click="init"
        >查询</el-button
      >
    </view>
    <detail-user-view ref="detailUserView" @comp="hidden"></detail-user-view>
    <detail-user-chart ref="detailUserChart" @comp="hidden"></detail-user-chart>
    <view style="display: flex">
      <view class="bord">
        <view class="title">
          <i class="icon el-icon-s-data"></i>
          <text style="flex: 1">用户地域分布</text>
        </view>
        <view class="part">
          <detail-shifu-map ref="shifuMap" @comp="hidden"></detail-shifu-map>
          <detail-shifu-rank ref="shifuRank" @comp="hidden"></detail-shifu-rank>
        </view>
      </view>
      <view class="bord2">
        <view class="title">
          <i class="icon el-icon-s-data"></i>
          <text style="flex: 1">用户身份比例</text>
        </view>
        <view class="part">
          <detail-user-pie></detail-user-pie>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import detailUserView from "./components/user-view";
import detailUserChart from "./components/user-chart";
import detailShifuMap from "./components/shifu-map";
import detailShifuRank from "./components/shifu-rank";
import detailUserPie from "./components/user-pie";

export default {
  components: {
    detailUserView,
    detailUserChart,
    detailShifuMap,
    detailShifuRank,
    detailUserPie,
  },
  data() {
    return {
      mode: "日",
      value: "view_count",
      num: 0,
      time: [],
      formDatas: {},
      pickerOptions: {
        shortcuts: [
           //今天
           {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start, end]);
            },
          },
          //昨天
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          //本月
          {
            text: "本月",
            onClick(picker) {
              let { monthStart, monthEnd,todayEnd } = vk.pubfn.getCommonTime(new Date());
              picker.$emit("pick", [monthStart, todayEnd]);
            },
          },
          //本年
          {
            text: "本年",
            onClick(picker) {
              let { yearStart, monthEnd,todayEnd } = vk.pubfn.getCommonTime(new Date());
              picker.$emit("pick", [yearStart, todayEnd]);
            },
          },
          
        ],
      },
    };
  },
  mounted() {
    this.num = 0;
    const end = new Date();
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
    this.time = [start.getTime(), end.getTime()];
    this.num = 0;
    this.init();
    // vk.showLoading("加载中...");
    // this.$refs.detailUserView.init(this.mode);
    // this.$refs.detailUserChart.init(this.mode)
    // this.endInfo()
  },
  methods: {
    init() {
      this.num = 2;
      //   vk.showLoading("加载中...");
      // this.$refs.detailUserChart.init(this.mode)

      this.num = 1;
      console.log(this.time);
      let end = this.time[1];
      let endTime = vk.pubfn.getCommonTime(new Date(end));
      let start = this.time[0];
      let startTime = vk.pubfn.getCommonTime(new Date(start));
      this.$refs.detailUserView.init([startTime.todayStart, endTime.todayEnd]);
      this.$refs.detailUserChart.init([startTime.todayStart, endTime.todayEnd]);
      this.endInfo();
    },
    async endInfo() {
      const res = await vk.callFunction({
        url: "admin/business/kh.stats.detailUserMap",
      });
      this.$refs.shifuMap.init(res);
      this.$refs.shifuRank.init(res);
    },
    hidden() {
      this.num++;
      if (this.num == 4) vk.hideLoading();
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  background-color: #f5f5f5;
}

.title {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 10px 10px 0 0;
  font-size: 14px;
  border-bottom: 1px solid #ebeef5;
  .icon {
    border-radius: 50%;
    border: 5px solid rgb(230, 247, 255);
    background-color: rgb(230, 247, 255);
    color: rgb(24, 144, 255);
    margin-right: 6px;
  }
}

.bord {
  display: inline-block;
  width: calc(70% - 20px);
  margin-right: 20px;
  padding-bottom: 20px;
  background-color: #fff;
  border-radius: 10px;
}

.bord2 {
  display: inline-block;
  width: 30%;
  padding-bottom: 20px;
  background-color: #fff;
  border-radius: 10px;
}

.part {
  display: flex;
  background-color: #fff;
  align-items: center;
  height: 360px;
  padding: 16px;
  box-sizing: border-box;
}
</style>
